<template>
  <video ref="refVideo" :src="src" />
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'

defineProps({
  src: {
    type: String,
    required: true
  }
})
const refVideo = ref<HTMLVideoElement | null>(null)

onMounted(() => {
  if (refVideo.value) {
    if (refVideo.value) {
      const player = new Plyr(refVideo.value, {
        controls: ['play', 'progress', 'current-time', 'mute', 'volume']
      })
      player.play()
    }
  }
})
</script>

<style scoped></style>
